<template>
  <div class="BindCard">
    <!-- <mt-header fixed title="绑定好嘞卡">
      <router-link to="" @click.prevent.native="Back" tag="span" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header> -->

    <form
      class="form"
      style="padding: 32px 22px 0 22px; box-sizing: border-box; display: flex;flex-direction: column; justify-content: flex-start;"
      :style="{ height: deviceFormHeight }"
      action=""
    >
      <p style="font-weight: Bold; font-size: 18px;">新用户注册</p>
      <!-- <p style="font-size: 15px;">未查询到您的好嘞卡信息，请先注册：</p> -->
      <p class="after" style="margin: 0; padding: 0; margin-bottom: 35px;">
        <label
          for="username"
          style="display: block;margin-bottom: 20px; font-size: 12px;"
          >您的姓名
        </label>
        <input
          style="border:none;  outline: none; width: 100%; font-size:16px; padding-bottom: 10px;"
          type="text"
          id="username"
          placeholder="请输入您的姓名"
          v-model="name"
        />
      </p>

      <p class="after" style="margin: 0; padding: 0; margin-bottom: 35px;">
        <label
          for="mobile"
          style="display: block;margin-bottom: 20px; font-size: 12px;"
          >您的手机号
        </label>
        <input
          style="border:none;  outline: none; width: 100%; font-size:16px; padding-bottom: 10px;"
          type="text"
          id="mobile"
          placeholder="请输入您的手机号"
          maxlength="11"
          v-model="mobile"
        />
      </p>

      <p class="lastAfter" style="margin: 0; padding: 0; margin-bottom: 35px;">
        <label
          for="captcha"
          style="display: block;margin-bottom: 20px; font-size: 12px;"
          >验证码
        </label>

        <span style="display: flex;justify-content:space-between;">
          <input
            style="width: 50%;border:none;outline: none;font-size:16px; padding-bottom: 10px;"
            type="text"
            id="captcha"
            placeholder="请输入验证码"
            maxlength="6"
            v-model="captchaKey"
          />
          <span
            @click="getVerification"
            style="width: 50%;background: #40AE36; display: inline-block; height:45px; border-radius: 22.5px; color: #fff;line-height: 45px; text-align: center; font-size: 15px;"
            >{{ captcha }}</span
          >
        </span>
      </p>

      <p
        style="margin: 0;  padding: 0;"
        :style="{ 'margin-top': deviceBtnMarginTop }"
      >
        <button
          style="border:none;background-color:#40AE36; display: block;width: 100%; height: 45px; border-radius: 22.5px;color: #fff; font-size: 18px; outline: none;"
          @click="submit"
        >
          立即注册
        </button>
      </p>
    </form>
  </div>
</template>
<script>
// import qs from "qs";
export default {
  data() {
    return {
      captcha: "验证码",
      captchaKey: "",
      timer: "",
      name: "",
      mobile: "",
      deviceFormHeight: "",
      deviceBtnMarginTop: ""
    };
  },
  mounted() {},
  created() {
    // localStorage.setItem("pageName", "bindcard");

    console.log(this.$route);
    this.initPage();
  },
  methods: {
    getVerification() {
      var timer = this.timer;
      if (timer) {
        return;
      }

      // 正则匹配
      if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
        this.$toast({
          message: "手机号码有误，请重填!",
          position: "middle",
          duration: 1500
        });
        return;
      }

      var captcha = 60;
      timer = setInterval(() => {
        captcha--;
        if (captcha < 0) {
          clearInterval(timer);
          this.timer = "";
          this.captcha = "验证码";
          return;
        }
        this.captcha = captcha;
      }, 1000);

      this.timer = timer;

      this.$axios
        .get("/village/household/send", {
          params: { mobile: this.mobile }
        })
        .then(({ data: res }) => {
          console.log("验证码", res);
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });

            return;
          }

          this.$toast({
            message: "发送成功",
            position: "middle",
            iconClass: "mintui mintui-success", // (图标需自行准备）
            duration: 1500
          });

          // 获取到验证码
          // this.captchaKey = res.data
        })
        .catch(() => {});
    },
    // Back() {
    //   this.$router.push({
    //     name: "home"
    //   });
    // },
    initPage() {
      var _this = this;
      (function(doc, win) {
        var docEl = doc.documentElement,
          resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            _this.deviceFormHeight = docEl.clientHeight + "px";
            _this.deviceBtnMarginTop = _this.$scaleHeight(30);
          };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
        doc.addEventListener("DOMContentLoaded", recalc, false); // 绑定浏览器缩放与加载时间
        _this.deviceFormHeight = docEl.clientHeight + "px";
        _this.deviceBtnMarginTop = _this.$scaleHeight(30);
        console.log(_this.deviceFormHeight);
      })(document, window);
    },
    //立即注册
    submit(e) {
      var event = e || window.event;
      this.cancelHandler(event);

      if (!this.name.trim()) {
        this.$toast({
          message: "请输入姓名",
          position: "middle",
          duration: 1500
        });
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
        this.$toast({
          message: "手机号码有误，请重填!",
          position: "middle",
          duration: 1500
        });
        return;
      }
      if (!this.captchaKey.trim()) {
        this.$toast({
          message: "请输入验证码",
          position: "middle",
          duration: 1500
        });
        return;
      }

      this.$axios
        .post("/village/household/insert", {
          openId: localStorage.getItem("openId"),
          name: this.name,
          mobile: this.mobile,
          captchaKey: this.captchaKey,
          villageName: this.$route.params.villageName,
          buildingNo: this.$route.params.buildingNo,
          unitNo: this.$route.params.unitNo,
          houseNumber: this.$route.params.houseNumber,
          villageId: this.$route.params.villageId,
          auditStatus: "0"
        })
        .then(({ data: res }) => {
          console.log("注册成功后", res);
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
          }

          this.$router.replace({
            name: "verifyprocess",
            params: {
              name: "参数~"
            }
          });
        })
        .catch(() => {});
    },
    cancelHandler(event) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
    }
  }
};
</script>
<style lang="scss">
// $color-primary: #fff;
// .mint-header {
//   background-color: $color-primary;
//   color: #333;
//   font-weight: Bold;
//   font-size: 18px;
//   height: 58px;
// }
.BindCard {
  height: 100%;
  background-color: #f6f6f6;
  overflow: hidden;
  // padding-top: 70px;
}
.form {
  background: #fff;
  //   height: 100%;
  color: #333;
}
.after::after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.lastAfter {
  // display: flex;
  // justify-content: space-between;
}
.lastAfter::after {
  content: "";
  display: block;
  width: 52%;
  //
  border-bottom: 1px solid #eee;
}
input {
  padding: 0;
}
</style>
